<template>
	<view class="container">
		<view class="logo">
			<image src="/static/img/logo.png"></image>
			<view class="logo_text">
				LOGO
			</view>
		</view>
		<view class="title">登录CRM系统</view>
		<form class="login-form">
			<view class="form-item">
				<uni-icons type="person" size="18" class="icon"></uni-icons>
				<input placeholder="输入账户名" class="input" v-model="user.username"/>
			</view>
			<view class="form-item">
				<uni-icons type="person" size="18" class="icon"></uni-icons>
				<input placeholder="输入密码" class="input" v-model="user.password"/>
			</view>
			<view class="form-item">
				<button class="button1" style=""  type="primary">登录系统</button>
			</view>
		</form>
		<view>
			<button class="button2" style="background-color: #33cc66; " type="primary">微信授权登录</button>
		</view>
		<text class="sp">员工系统禁止外部登入</text>
	</view>
		
</template>

<script setup>
import { ref } from 'vue';	
const msg =ref('登录')

const user = ref({
  username:'',
  password:''
})
const login = ()=>{
	axios.post(BASE_URL+'/crm/login/user',user.value).then((response)=>{
		if(response.data.code==2000){
		router.push('/home');
	}else{
		ElMessage.error(response.data.message);
		}
	})
}
</script>

<style>
	page{
		background-color: #fff;
		overflow: hidden; 
	}
	.container{
		padding: 0 100rpx;
	}
	.logo {
	  text-align: center; 
	  margin-top: 80rpx;
	  position: relative;
	}
	 
	.logo > image {
	  width: 136rpx;
	  height: 124rpx;
	}
	 
	.logo > .logo_text {
	  position: absolute;
	  top: 50%; 
	  left: 50%;
	  transform: translate(-50%, -50%); 
	  z-index: 6;
	}
	.title{
		margin-top: 50rpx;
		text-align: center;
		font-size: 36rpx;
		color: #333;
		margin-bottom: 130rpx;
	}
	.form-item{
		position: relative;
		margin-bottom: 30rpx;
	}
	.form-item > .icon{
		position: absolute;
		top: 16rpx;
		left: 16rpx;
	}
	.form-item > .input{
		box-sizing: border-box;
		width: 100%;
		height: 70rpx;
		padding-left: 70rpx;
		padding-right: 20rpx;
		border: 1px solid #e4e4e4;
		border-radius: 12rpx;
		font-size: 24rpx;
		background-color: #fff;
	}
	button{
		margin-bottom: 50rpx;
	}
	.sp{
		font-family: 'MicrosoftYaHei', '微软雅黑';
		    font-weight: 400;
		    font-style: normal;
		    font-size: 12px;
		    color: #999999;
			display: block;  
			width: fit-content;
			margin: 0 auto; 
	}
	.button1{
		background-color: #2191f7; 
		color: #fff;
		height: 80rpx; 
		line-height: 80rpx;
	}
	.button2{
		color: #fff;
		height: 80rpx; 
		line-height: 80rpx;
	}
</style>
